<template>
  <div class="x-unit" @click.self="closeMask" :style="{height:`${deviceH}px`}">
    <div class="unit-ctx" :style="{'background-image':`url(${modelBg})`}">
      <div class="ctx-title" v-if="!detailshow&&!guanzhu">待办工作</div>
      <div class="ctx-info" v-if="historyshow&&!detailshow&&!guanzhu">
        <div class="info-table">
          <div class="table-rs">
            <div class="table-header">
              <div class="table-finish">
                      <!-- <div
                  style="cursor: pointer;"
                    class="table-finish-item1"
                    :class="{'table-finish-item-active':status==2}"
                    @click="changeStatus(2)"
                  >近3天登记人员</div> -->
                  <div
                  style="cursor: pointer;"
                    class="table-finish-item1"
                    :class="{'table-finish-item-active':status==2}"
                    @click="changeStatus(2)"
                  >人员关注</div>
                  <div
                  style="cursor: pointer;"
                    class="table-finish-item2"
                    :class="{'table-finish-item-active':status==3}"
                    @click="changeStatus(3)"
                  >车辆关注</div>

                  <div
                  style="cursor: pointer;"
                    class="table-finish-item2"
                    :class="{'table-finish-item-active':status==1}"
                    @click="changeStatus(1)"
                  >门禁申请</div>
                <div
                  style="cursor: pointer;"
                    class="table-finish-item2"
                    :class="{'table-finish-item-active':status==0}"
                    @click="changeStatus(0)"
                  >出租房申报</div>
                   <div
                  style="cursor: pointer;"
                    class="table-finish-item2"
                    :class="{'table-finish-item-active':status==4}"
                    @click="changeStatus(4)"
                  >人员异常行为分析</div>
                   <div
                  style="cursor: pointer;"
                    class="table-finish-item2"
                    :class="{'table-finish-item-active':status==5}"
                    @click="changeStatus(5)"
                  >车辆异常行为分析</div>
                   <div
                  style="cursor: pointer;"
                    class="table-finish-item3"
                    :class="{'table-finish-item-active':status==6}"
                    @click="changeStatus(6)"
                  >老人异常行为分析</div>


              </div>
               <div class="btnsearch" v-show="status==2 || status==3" @click="showguanzhu(status)">
                    新增
                  </div>



            </div>

            <ul class="table-list" v-show="status==0">
              <li class="list-item">
                <div class="item-no">序号</div>
                <div class="item-fwaddress">地址</div>
                <div class="item-fwname">房主姓名</div>
                <div class="item-fwidNum">房主身份证号</div>
                <div class="item-fwphone">联系方式</div>
                <div class="item-fwstatusType">类型</div>
                <div class="item-fwupdateName">审核人</div>
                <div class="item-fwupdateTime">审核时间</div>
              </li>
              <li v-for="(item,i) in housedeclarforpage" :key="item.name" class="list-item">
                <div class="item-no">{{i+1+pageSize*(pageNum-1)}}</div>
                <div class="item-fwaddress">{{item.address}}</div>
                <div class="item-fwname">{{item.name}}</div>
                <div class="item-fwidNum" @click="changedangan(item.idNum)" style="cursor: pointer;">{{new String().hideidCard(item.idNum)}}</div>
                <div class="item-fwphone">{{item.phone}}</div>
                <div class="item-fwstatusType">{{item.statusType}}</div>
                <div class="item-fwupdateName">{{item.updateName |filterName }}</div>
                <div class="item-fwupdateTime">{{item.updateTime.replace("T", " ").substr(0, 10)}}</div>
              </li>
            </ul>
            <ul class="table-list" v-show="status==1">
              <li class="list-item">
                <div class="item-no">序号</div>
                <div class="item-mjname">姓名</div>
                <div class="item-mjidnum">身份证号</div>
                <div class="item-mjphone">联系方式</div>
                <div class="item-mjaddress">地址</div>
                <div class="item-mjstatustype">类型</div>
                <div class="item-mjupdateName">审核人</div>
                <div class="item-mjupdateTime">审核时间</div>
              </li>
              <li v-for="(item,i) in gatedpersonforpage" :key="item.name" class="list-item">
                <div class="item-no">{{i+1+pageSize*(pageNum-1)}}</div>
                <div class="item-mjname">{{item.name}}</div>
                <div class="item-mjidnum" @click="changedangan(item.idNum)" style="cursor: pointer;">{{item.idNum}}</div>
                <div class="item-mjphone">{{item.phone}}</div>
                <div class="item-mjaddress">{{item.address}}</div>
                <div class="item-mjstatustype">{{item.statusType}}</div>
                <div class="item-mjupdateName">{{item.updateName |filterName}}</div>
                <div class="item-mjupdateTime">{{item.updateTime.replace("T", " ").substr(0, 10)}}</div>
              </li>
            </ul>
            <ul class="table-list" v-if="status==2">

               <li class="list-item">
                <div class="item-no">序号</div>
                <div class="item-mjname">姓名</div>
                <div class="item-mjidnum">身份证号</div>
                <div class="item-mjphone">住址</div>
                <!-- <div class="item-mjaddress1">关注时间</div> -->
                <div class="item-mjstatustype">当前状态</div>
                <div class="item-mjidnum">出现时间</div>
                <div class="item-mjphone">信息推送</div>
                 <div class="item-mjaddress1">操作</div>
              </li>
              <li v-for="(item,i) in Personforpage" :key="item.id"  class="list-item" >
                <div class="item-no">{{i+1+pageSize*(pageNum-1)}}</div>
                <div class="item-mjname" >{{new String().hideName(item.monitorName)}}</div>
                <div class="item-mjidnum" style="cursor: pointer;"  @click="changeDetail(i)">{{new String().hideidCard(item.idNum)}}</div>
                <div class="item-mjphone">{{item.address}}</div>
                <!-- <div class="item-mjaddress1">{{new Date().dateFtt(item.monitorTime,'MM-dd hh:mm:ss')}}</div> -->
                <div class="item-mjstatustype">{{item.monitorStatus}}</div>
                <div class="item-mjidnum">{{new Date().dateFtt(item.appearanceTime,'MM-dd hh:mm:ss')}}</div>
                <div class="item-mjphone">{{item.informationushP}}</div>
                 <div class="item-mjaddress1" style="cursor: pointer;"><span style="margin-right:5px" @click="updateinfo(item)">修改</span> <span @click="deleteinfo(item.id)">删除</span></div>

              </li>
            </ul>
            <ul class="table-list" v-if="status==3">
              <li class="list-item">
                <div class="item-no">序号</div>
                <div class="item-mjname">姓名</div>
                <div class="item-mjidnum">身份证号</div>
                <div class="item-mjphone">车牌号</div>
                <div class="item-mjaddress1">关注时间</div>
                <div class="item-mjstatustype">当前状态</div>
                <!-- <div class="item-mjidnum">出现时间</div> -->
                <div class="item-mjphone">信息推送</div>
                 <div class="item-mjaddress1">操作</div>
              </li>
              <li v-for="(item,i) in Carforpage" :key="item.id" class="list-item">
                <div class="item-no">{{i+1+pageSize*(pageNum-1)}}</div>
                <div class="item-mjname">{{new String().hideName(item.monitorName)}}</div>
                <div class="item-mjidnum"  >{{new String().hideidCard(item.idNum)}}</div>
                <div class="item-mjphone"  @click="changeDetail(i)" style="cursor: pointer;">{{item.carNum}}</div>
                <div class="item-mjaddress1">{{new Date().dateFtt(item.monitorTime,'MM-dd hh:mm:ss')}}</div>
                <div class="item-mjstatustype">{{item.monitorStatus}}</div>
                <!-- <div class="item-mjidnum">{{new Date().dateFtt(item.appearanceTime,'MM-dd hh:mm:ss')}}</div> -->
                <div class="item-mjphone">{{item.informationushP}}</div>
                 <div class="item-mjaddress1"  style="cursor: pointer;"><span style="margin-right:5px" @click="updateinfo(item)">修改</span> <span @click="deleteinfo(item.id)">删除</span></div>

              </li>
            </ul>
            <ul class="table-list" v-show="status==4">
              <li class="list-item">
                <div class="item-no">序号</div>
                <div class="item-mjname">姓名</div>
                <div class="item-mjidnum">身份证号</div>
                <div class="item-mjphone">手机</div>
                <div class="item-detail">异常描述</div>
                <div class="item-mjidnum">住址</div>
                <!-- <div class="item-mjphone">信息推送</div> -->
              </li>
              <li v-for="(item,i) in PersonnelAnomaliesforpage" :key="item.id" class="list-item"  >
                <div class="item-no">{{i+1+pageSize*(pageNum-1)}}</div>
                <div class="item-mjname">{{new String().hideName(item.name)}}</div>
                <div class="item-mjidnum" @click="changedangan(item.idNum)" style="cursor: pointer;" >{{new String().hideidCard(item.idNum)}}</div>
                <div class="item-mjphone">{{item.phone}}</div>
                <div class="item-detail">{{item.remark}}</div>
                <div class="item-mjidnum">{{item.unitNo+"号楼"+item.unitNo+"室"}}</div>
                <!-- <div class="item-mjphone">{{item.informationushP}}</div> -->

              </li>
            </ul>
            <ul class="table-list" v-show="status==5">
              <li class="list-item">
                <div class="item-no">序号</div>
                <!-- <div class="item-mjname">姓名</div> -->
                <div class="item-mjidnum">身份证号</div>
                <div class="item-mjphone">车牌</div>
                <div class="item-mjphone">图片</div>
                <div class="item-detail">异常描述</div>
                <!-- <div class="item-mjidnum">住址</div> -->
                <div class="item-mjphone">时间</div>

              </li>
              <li v-for="(item,i) in CarAnomaliesforpage" :key="item.id" class="list-item"  style="height:72px" >
                <div class="item-no">{{i+1+pageSize*(pageNum-1)}}</div>
                <!-- <div class="item-mjname">{{new String().hideName(item.name)}}</div> -->
                <div class="item-mjidnum" @click="changedangan(item.idNum)" style="cursor: pointer;" >{{new String().hideidCard(item.idNum)}}</div>
                <div class="item-mjphone">{{item.license}}</div>
                <div class="item-mjphone" @click="picshow(item.pic)" style="cursor: pointer;">
                  <img class="pic" :src="item.pic |filterimgsrc" />
                  </div>
                  <div class="item-detail">{{item.remark}}</div>
                <!-- <div class="item-mjidnum">{{item.roomNum}}</div> -->
                <div class="item-mjphone">{{new Date().dateFtt(item.startTime)}}</div>

              </li>
            </ul>
            <ul class="table-list" v-show="status==6">
              <li class="list-item">
                <div class="item-no">序号</div>
                <div class="item-mjname">姓名</div>
                <div class="item-mjidnum">身份证号</div>
                <div class="item-mjphone">手机</div>
                <div class="item-detail">异常描述</div>
                <div class="item-mjidnum">住址</div>
                <!-- <div class="item-mjphone">信息推送</div> -->
              </li>
              <li v-for="(item,i) in OldPeopleAnomaliesforpage" :key="item.id" class="list-item">
                <div class="item-no">{{i+1+pageSize*(pageNum-1)}}</div>
                <div class="item-mjname">{{new String().hideName(item.name)}}</div>
                <div class="item-mjidnum" @click="changedangan(item.idNum)" style="cursor: pointer;" >{{new String().hideidCard(item.idNum)}}</div>
                <div class="item-mjphone">{{item.phone}}</div>
                <div class="item-detail">{{item.remark}}</div>
                <div class="item-mjidnum">{{item.unitNo+"号楼"+item.houseNo+"室"}}</div>
                <!-- <div class="item-mjphone">{{item.informationushP}}</div> -->

              </li>
            </ul>
            <!-- <ul class="table-list" v-show="status==2">
                <li class="list-item">
                  <div class="item-no">序号</div>
                  <div class="item-mjname">姓名</div>
                  <div class="item-mjidnum">身份证号</div>
                  <div class="item-mjphone">联系方式</div>
                  <div class="item-mjaddress1">地址</div>
                  <div class="item-mjstatustype">状态</div>
                </li>
              <li v-for="(item,i) in doorAccessforpage" :key="item.id" class="list-item">
                <div class="item-no">{{i+1+pageSize*(pageNum-1)}}</div>
                <div class="item-mjname">{{item.truename}}</div>
                <div class="item-mjidnum" style="cursor: pointer;" @click="changedangan(item.cardid)">{{new String().hideidCard(item.cardid)}}</div>
                <div class="item-mjphone">{{item.mobile}}</div>
                <div class="item-mjaddress1">{{item.estate+item.unitno+"号"+item.houseno+"室"}}</div>
                <div class="item-mjstatustype">{{item.status}}</div>

              </li>
            </ul> -->

          </div>
          <div v-if="allpage > 0" class="table-footer">
            <x-page
            :currentPage="pageNum"
              @currentChange="currentChange"
              :page-size="5"
              :allpage="allpage"
              :total-num="false"
            />
          </div>
        </div>
      </div>
      <div v-if="!historyshow">
				<x-dangan :id="danganid" v-if="dangan" @changedangan="changedangan(null,'out')"></x-dangan>
			</div>
      		<!-- dialog -->
		<el-dialog :visible.sync="dialogVisible" v-if="dialogVisible" v-dialogDrag class="jk-dialog" width="80%">
			<div style="width:786px;height:432px;margin:auto">
				<img :src="picurl |filterimgsrc" alt style="height:100%" />
			</div>
		</el-dialog>
       <!-- 详情 -->
      <div v-if="detailshow">
         <div class="ctx-title">关注详情</div>
              <span @click="detailshow= false" style="float:right" class="back">
                <img src="../../assets/images/icon/return.png" alt />
              </span>

        <div style="border:1px solid #246970;width:800px;margin: 0  auto;margin-top:40px" v-if="detailshow">
          <div class="span_title">
            被关注人信息
          </div>
          <div style="display:flex">
              <div class="span_left">姓名</div>
              <div class="span_right" >{{detail.monitorName}}</div>
              <div class="span_left">身份证号</div>
              <div class="span_right">{{new String().hideidCard(detail.idNum)}}</div>
          </div>
          <div style="display:flex">
              <div class="span_left">性别</div>
              <div class="span_right" >{{detail.sex}}</div>
              <div class="span_left">出生日期</div>
              <div class="span_right">{{detail.birthday}}</div>
          </div>
          <div style="display:flex">
              <div class="span_left">单元</div>
              <div class="span_right" >{{detail.unitNo}}</div>
              <div class="span_left">门牌号</div>
              <div class="span_right">{{detail.houseNo}}</div>
          </div>
            <div class="span_title">
            关注人信息
          </div>
          <div style="display:flex">
              <div class="span_left">姓名</div>
              <div class="span_right" >{{detail.name}}</div>
              <div class="span_left">类型</div>
              <div class="span_right">{{detail.type}}</div>
          </div>
          <div style="display:flex">
              <div class="span_left">联系电话</div>
              <div class="span_right" >{{detail.phone}}</div>
              <div class="span_left">通知方式</div>
              <div class="span_right">{{detail.methodToInforme}}</div>
          </div>


        </div>
      </div>

      <div v-if="guanzhu">
          <div class="ctx-title">{{isupdate?'编辑关注':'新增关注'}}</div>
              <span @click="guanzhu= false" style="float:right" class="back">
                <img src="../../assets/images/icon/return.png" alt />
              </span>
              <div class="content">
                <div class="monitor-content" v-if="status==2">
                  <div class="items-title">
                    被监控人姓名
                  </div>
                  <div class="items-content">
                    <div class="header-item" style="width:100%;">
                      <input v-model="guanzhudetail.monitorName" class="input" placeholder="被监控人姓名" />
                    </div>
                  </div>
                </div>
                <div class="monitor-content" v-if="status==2">
                  <div class="items-title">
                    被监控人身份证
                  </div>
                  <div class="items-content">
                    <div class="header-item" style="width:100%;">
                    <input v-model="guanzhudetail.idNum" class="input" placeholder="被监控人身份证" />
                    </div>
                  </div>
                </div>
                 <div class="monitor-content" v-if="status==3">
                  <div class="items-title">
                   被监控车牌号
                  </div>
                  <div class="items-content">
                    <div class="header-item" style="width:100%;">
                      <input v-model="guanzhudetail.carNum" class="input" placeholder="被监控车牌号" />
                    </div>
                  </div>
                </div>
                <div class="monitor-content">
                  <div class="items-title">
                    接收人手机号
                  </div>
                  <div class="items-content">
                    <div class="header-item" style="width:100%;">
                      <input v-model="guanzhudetail.receiveNum" class="input" placeholder="接收人手机号" />
                    </div>
                  </div>
                </div>
                <div class="monitor-content" v-if="isupdate">
                  <div class="items-title">
                    关注状态
                  </div>
                  <div class="items-content">
                    <div class="header-item" style="width:100%;height:90%;" >
                     <x-select @selectItem="selectItem" :name="unitTypeName" :listItem="MonitorList" />
                    </div>
                  </div>
                </div>

              </div>
              <div style="display: flex;justify-content: center">
                <div class="content-btn" @click="createmonitor()" v-if="!isupdate">
                    新增
                  </div>
                  <div class="content-btn" @click="updatemonitor()" v-if="isupdate">
                   编辑
                  </div>
              </div>



      </div>
    </div>



  </div>
</template>
<script>
import {
  GetUnitTotleAndType,
  GetUnitInfoForPage,
  GetHouseDeclarForPage,
  GetGatedPersonForPage,
  GetDoorAccessForThreeDay,
  monitorPersonPageList,
  monitorCarPageList,
  CarAnomalies,
  PersonnelAnomalies,
  OldPeopleAnomalies,
  updateMonitorPerson,
  saveMonitorPerson,
  deleteMonitorPerson,
  saveMonitorCar,
  updateMonitorCar,
  deleteMonitorCar
} from "@/api/peopleApi";
import XPage from "@/components/xpage";
import XSelect from "@/components/xselect";
import user from '@/api/user.json'
import XDangan from '@/components/xdanganmodel'
import { async } from 'q';
export default {
  name: "xunitmodel",
  props: {
    id: {
      type: String,
      default: ""
    },
    code: {
      type: String,
      default: ""
    }
  },
  computed: {},
  data() {
    return {
      modelBg: require("@/assets/images/modelBg.png"),
      deviceH: 0,
      lengalperson: "", //法人
      lpTelePhone: "", //法人电话
      lpidCard: "", //法人身份证号
      unitName: "", //单位名称,
      unitTelePhone: "", //单位电话
      unitType: 0, //单位类型
      unitTypeName: "", //单位名称
      pageSize: 12,
      pageNum: 1,
      UnitTypeEchartsData: [],
      UnitPageEchartsData: [],
      UnitTypeEchartsData1: null,
      UnitTypeEchartsData2: [],
      Personforpage: [],
      Carforpage: [],
      total: 0,
      allpage: 0,
       historyshow: true,
      dangan: false,
      dialogVisible:false,
      danganid: '',
      unitTypeList: [
        { enumName: "房屋申报", id: "0" },
        { enumName: "门禁权限", id: "1" }
      ],
      status:2, //0 房屋申报 1 门禁权限 2 布控人 3 布控车
      camerquery: {},
      finishactive: 0,
      housedeclarforpage: [],
      gatedpersonforpage: [],
      doorAccessforpage:[],
      detailshow: false,
      detail:{},
      CarAnomaliesforpage:[],
      PersonnelAnomaliesforpage:[],
      OldPeopleAnomaliesforpage:[],
      picurl:'',
      guanzhu:false,
      isupdate:false,
      guanzhudetail:{},
      MonitorList: [
        { enumName: "关注中", id: "0" },
        { enumName: "解除关注", id: "1" }
      ],
    };
  },
  components: {
    XPage,
    XSelect,
    XDangan
  },
  beforeMount() {
    let h = document.documentElement.clientHeight || document.body.clientHeight;
    this.deviceH = h;
  },
     filters:{
       filterName(val) {
         var name=''
         user.map(item=>{
           if(item.userid==val){
             name=item.truename
           }

         })
        return name
      }
    },
  mounted() {
     this.GetPersonPageList();
  },
  methods: {
    async updateinfo(i){
      this.isupdate=true
      if(this.status==2)
       this.guanzhudetail={
          id:i.id,
          idNum:i.idNum,
          monitorName:i.monitorName,
          monitorStatus:i.monitorStatus=='关注中'?0:1,
          receiveNum:i.phone
       }
       if(this.status==3){
         this.guanzhudetail={
            id:i.id,
            carNum:i.carNum,
            monitorStatus:i.monitorStatus=='关注中'?0:1,
            receiveNum:i.phone
        }
       }
       this.unitTypeName=i.monitorStatus=='关注中'?'关注中':'解除关注'

        this.guanzhu=true
    },
    async deleteinfo(id){
      this.$confirm('确定要删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(this.status==2){
            deleteMonitorPerson(id)
             this.GetPersonPageList()
          }
          if(this.status==3){
            deleteMonitorCar(id)
             this.GetCarPageList()
          }
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {

        });
    },
    async createmonitor(){
      if(this.status==2){
        let params={
          sourceSubdistrictid:this.code,
          idNum:this.guanzhudetail.idNum,
          monitorName:this.guanzhudetail.monitorName,
          monitorStatus:0,
          receiveNum:this.guanzhudetail.receiveNum
        }
        let res=await saveMonitorPerson(params)
        if(res.code==200){
          this.$message.success('提交成功！');
          this.guanzhu= false
          this.GetPersonPageList()
        }
      }
      if(this.status==3){
         let params={
          sourceSubdistrictid:this.code,
          carNum:this.guanzhudetail.carNum,
          monitorStatus:0,
          receiveNum:this.guanzhudetail.receiveNum
        }
        let res=await saveMonitorCar(params)
        if(res.code==200){
          this.$message.success('提交成功！');
          this.guanzhu= false
          this.GetCarPageList()
        }

      }

    },
    async updatemonitor(){
       if(this.status==2){
        let params={
          sourceSubdistrictid:this.code,
          idNum:this.guanzhudetail.idNum,
          monitorName:this.guanzhudetail.monitorName,
          id:this.guanzhudetail.id,
          monitorStatus:this.guanzhudetail.monitorStatus,
          receiveNum:this.guanzhudetail.receiveNum
        }
        let res=await updateMonitorPerson(params)
        if(res.code==200){
          this.$message.success('提交成功！');
          this.guanzhu= false
          this.GetPersonPageList()
        }
      }
      if(this.status==3){
         let params={
           id:this.guanzhudetail.id,
          sourceSubdistrictid:this.code,
          carNum:this.guanzhudetail.carNum,
          monitorStatus:this.guanzhudetail.monitorStatus,
          receiveNum:this.guanzhudetail.receiveNum
        }
        let res=await updateMonitorCar(params)
        if(res.code==200){
          this.$message.success('提交成功！');
          this.guanzhu= false
          this.GetCarPageList()
        }

      }

    },
    showguanzhu(status){
      //人
        this.guanzhudetail={}
        this.guanzhu=true
        this.isupdate=false

    },
    picshow (url) {
      this.dialogVisible = !this.dialogVisible
      this.picurl = url
    },
     changeDetail(index){
      this.detailshow=true;
      if(this.status==2){
        this.detail=this.Personforpage[index]
      }
      if(this.status==3){
        this.detail=this.Carforpage[index]
      }
    },
    changedangan (id,type) {
      if(id){
        this.dangan = !this.dangan
        this.danganid = id
        this.historyshow = !this.historyshow
      }
      if(type=='out'){
        this.dangan = !this.dangan
        this.danganid = ''
        this.historyshow = !this.historyshow
      }
    },
    changeStatus(status){
      this.status=status
      this.pageNum = 1
      if(status==0){
        this.GetHouseDeclarForPage()
      }
      if(status==1){
        this.GetGatedPersonForPage()
      }
      if(status==2){
        this.GetPersonPageList()
      }
      if(status==3){
        this.GetCarPageList()
      }
      if(status==4){
        this.GetPersonnelAnomalies()
      }
      if(status==5){
        this.GetCarAnomalies()
      }
      if(status==6){
        this.GetOldPeopleAnomalies()
      }



    },
     async GetPersonPageList(){
      let params={
        placeId:this.code,
        pageSize:this.pageSize,
        pageNum:this.pageNum,
        monitorStatus:"0"
      }
      let res = await monitorPersonPageList(params);
      this.total = res.total;
      console.log(res)
      this.allpage = Math.ceil(this.total / this.pageSize);
      this.Personforpage = res.list;
    },
     async GetCarPageList(){
      let params={
        placeId:this.code,
        pageSize:this.pageSize,
        pageNum:this.pageNum,
        monitorStatus:"0"
      }
      let res = await monitorCarPageList(params);
      this.total = res.total;
      console.log(res)
      this.allpage = Math.ceil(this.total / this.pageSize);
      this.Carforpage = res.list;
    },
    async GetDoorAccessForThreeDay(){
      let params={
        placeId:this.code,
        pageSize:this.pageSize,
        pageNum:this.pageNum
      }
      let res = await GetDoorAccessForThreeDay(params);
      this.total = res.total;
      this.allpage = Math.ceil(this.total / this.pageSize);
      this.doorAccessforpage = res.list;
    },
     async GetCarAnomalies(){
      let params={
        placeId:this.code,
        pageSize:6,
        pageNum:this.pageNum
      }
      let res = await CarAnomalies(params);
      this.total = res.total;
      console.log(res)
      this.allpage = Math.ceil(this.total / this.pageSize);
      this.CarAnomaliesforpage = res.list;
    },
     async GetPersonnelAnomalies(){
      let params={
        placeId:this.code,
        pageSize:this.pageSize,
        pageNum:this.pageNum
      }
      let res = await PersonnelAnomalies(params);
      this.total = res.total;
      console.log(res)
      this.allpage = Math.ceil(this.total / this.pageSize);
      this.PersonnelAnomaliesforpage = res.list;
    },
     async GetOldPeopleAnomalies(){
      let params={
        placeId:this.code,
        pageSize:this.pageSize,
        pageNum:this.pageNum
      }
      let res = await OldPeopleAnomalies(params);
      this.total = res.total;
      console.log(res)
      this.allpage = Math.ceil(this.total / this.pageSize);
      this.OldPeopleAnomaliesforpage = res.list;
    },
    async GetHouseDeclarForPage() {
      var _this = this;
      let params = {};
      _this.housedeclarforpage = [];
      params.placeId = _this.code;
      params.pageSize = _this.pageSize;
      params.pageNum = _this.pageNum;
      console.log(params);
      let housedeclarforpage = await GetHouseDeclarForPage(params);
      console.log(housedeclarforpage);
      _this.total = housedeclarforpage.total;
      console.log(_this.total);
      this.allpage = Math.ceil(this.total / this.pageSize);
      console.log(this.allpage);
      _this.housedeclarforpage = housedeclarforpage.list;
      console.log(JSON.stringify(_this.housedeclarforpage));
    },
    async GetGatedPersonForPage() {
      var _this = this;
      let params = {};
      _this.gatedpersonforpage = [];
      params.placeId = _this.code;
      params.pageSize = _this.pageSize;
      params.pageNum = _this.pageNum;
      console.log(params);
      let gatedpersonforpage = await GetGatedPersonForPage(params);
      console.log(gatedpersonforpage);
      _this.total = gatedpersonforpage.total;
      console.log(_this.total);
      this.allpage = Math.ceil(this.total / this.pageSize);
      console.log(this.allpage);
      _this.gatedpersonforpage = gatedpersonforpage.list;
      console.log(JSON.stringify(_this.gatedpersonforpage));
    },

    async GetUnitData() {
      try {
        let camerquery = {
          code: this.code,
          id: this.id
        };
        this.camerquery = camerquery;
        let pagequery = {
          code: this.code,
          id: this.id,
          lengalperson: this.lengalperson, //法人
          lpTelePhone: this.lpTelePhone, //法人电话
          lpidCard: this.lpidCard, //法人身份证号
          unitName: this.unitName, //单位名称,
          unitTelePhone: this.unitTelePhone, //单位电话
          unitType: this.unitType, //单位类型
          pageNum: this.pageNum,
          pageSize: this.pageSize
        };
        console.log(pagequery);
        this.UnitTypeEchartsData = await GetUnitTotleAndType(camerquery);

        console.log("_+_+_+");
        console.log(this.UnitTypeEchartsData);
        this.UnitTypeEchartsData1 = this.UnitTypeEchartsData[0];
        this.UnitTypeEchartsData2 = this.UnitTypeEchartsData.splice(
          1,
          this.UnitTypeEchartsData.length
        );

        const res = await GetUnitInfoForPage(pagequery);
        console.log("_+_+_+");
        console.log(res);
        this.total = res.data.total;
        this.allpage = Math.ceil(this.total / this.pageSize);
        console.log(this.allpage);
        this.UnitPageEchartsData = res.data.list;
      } catch (error) {
        this.$message({
          type: "error",
          message: error
        });
      }
    },

    closeMask() {
      this.$emit("closeMask");
    },
    //分页
    currentChange(n) {
      console.log("分页");
      this.pageNum = n;
      if (this.status==0) {
        this.GetHouseDeclarForPage();
      }
      if(this.status==1){
        this.GetGatedPersonForPage();
      }
      if(this.status==2){
        this.GetDoorAccessForThreeDay()
      }

      if(this.status==4){
        this.GetPersonnelAnomalies()
      }
      if(this.status==5){
        this.GetCarAnomalies()
      }
      if(this.status==6){
        this.GetOldPeopleAnomalies()
      }
    },
    //搜索
    searchEvent() {
      var _this = this;
      if (_this.unitType == 0 || _this.unitType == "") {
        _this.pageNum = 1;
        _this.GetHouseDeclarForPage();
      } else {
        _this.pageNum = 1;
        _this.GetGatedPersonForPage();
      }
       this.currentChange(1)
    },
    //选择下拉框
    selectItem(name, id) {
      this.unitTypeName = name;
      this.guanzhudetail.monitorStatus = id;
    },

    //已完成待完成
    ifFinishActive(num) {
      var _this = this;
      if (num == 0) {
        _this.finishactive = 0;
      } else if (num == 1) {
        _this.finishactive = 1;
      }
    }
  }
};
</script>
<style lang="less" scoped>
*{
  font-size: 16px;
}
	.header-item {
								width: 186px;
								height: 100%;
								border: none;
								outline: none;
								background: #06121d;
								border: 1px solid rgba(62, 178, 215, 0);
								border-radius: 4px;
								font-size: 14px;
								color: #fff;
								padding: 0 14px;
								box-sizing: border-box;

								.input {
									font-size: 14px;
									color: #fff;
									width: 100%;
									height: 100%;
									border: none;
									outline: none;
									background: transparent;
								}
							}
	.btnsearch {
		float: right;
		width: 66px;
		height: 100%;
		background: #72edf5;
		border-radius: 4px;
		text-align: center;
		line-height: 36px;
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: #000000;
    cursor:pointer;
	}
 .back {
      float: right;
      position: absolute;
      right: 60px;
      width: 0px;
      top: 30px;
      cursor: pointer;

      img {
        width: 30px;
        height: 30px;
      }
    }
 .span_left {
    background: rgba(27, 58, 61, 0.75);
    border: 1px solid #246970;
    padding-right: 15px;
    text-align: right;
    color: #ffffff;
    width: 150px;
    height: 50px;
    line-height: 50px;
  }
  .span_title{
     background: rgba(27, 58, 61, 0.75);
    border: 1px solid #246970;
     text-align: center;
    color: #ffffff;
     height: 50px;
    line-height: 50px;
  }
    .span_right {
    padding-left: 20px;
    text-align: left;
    color: #ffffff;
    border: 1px solid #246970;
    width: 250px;
    height: 50px;
    line-height: 50px;
  }
/*门禁*/
.item-mjname {
  color: #fff;
  width: 107px;
}
.item-mjidnum {
  color: #fff;
  width: 150px;
}
.item-mjphone {
  color: #fff;
  width: 170px;
}
.item-mjaddress {
  color: #fff;
  width: 170px;
}
.item-mjaddress1 {
  color: #fff;
  width: 300px;
}
.item-detail{
   color: #fff;
  width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-mjaddress {
  color: #fff;
  width: 170px;
}
.item-mjaddress1 {
  color: #fff;
  width: 200px;
}
.item-mjstatustype {
  color: #fff;
  width: 120px;
}
.item-mjstatustype {
  color: #fff;
  width: 150px;
}

  .item-mjupdateName {
    color: #fff;
    width: 150px;
    overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
  }

  .item-mjupdateTime {
    color: #fff;
    width: 150px;
  }

/*房屋*/
.item-fwaddress {
  color: #fff;
  width: 107px;
}

.item-fwname {
  color: #fff;
  width: 150px;
}

.item-fwidNum {
  color: #fff;
  width: 170px;
}

.item-fwphone {
  color: #fff;
  width: 170px;
}

.item-fwstatusType {
  color: #fff;
  width: 150px;
}

  .item-fwupdateName {
    color: #fff;
    width: 150px;
  }

  .item-fwupdateTime {
    color: #fff;
    width: 150px;
  }

.table-finish {
  height: 36px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.table-finish-items {
  height: 36px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.table-finish-item1 {
  // width: 70px;
  height: 36px;
  line-height: 36px;
  background: #06121d;
  color: #fff;
  border-radius: 4px 0 0 4px;
  padding: 0 10px;
  margin-right: 5px;
}

.table-finish-item2 {
  // width: 70px;
  height: 36px;
  line-height: 36px;
  background: #06121d;
  color: #fff;
  // border-radius: 0 4px 4px 0;
  padding: 0 10px;
}

.table-finish-item3 {
  // width: 70px;
  height: 36px;
  line-height: 36px;
  background: #06121d;
  color: #fff;
  border-radius: 0 4px 4px 0;
  padding: 0 10px;
}

.table-finish-item-active {
  background: #72edf5;
  color: #000;
}

.x-unit {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  .item-pie {
    width: 100%;
    height: 400px;
    margin-top: 10px;
    padding: 5px 0px;
    box-sizing: border-box;
    .pie-canvas {
      width: 100%;
      height: 100%;
    }
  }
  .unit-ctx {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 1177px;
    height: 800px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    padding: 10px 30px;
    box-sizing: border-box;
    .ctx-title {
      width: 100%;
      padding-top: 10px;
      box-sizing: border-box;
      font-family: PingFangSC-Medium;
      font-size: 24px;
      color: #e9e9e9;
      letter-spacing: 4.8px;
      text-align: center;
      box-sizing: border-box;
    }
    .ctx-info {
      width: 100%;

      height: 748px;
      padding-top: 20px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-around;
      align-items: flex-start;
      .info-type {
        flex: 1;
        .type-title {
          width: 100%;
          font-family: PingFangSC-Medium;
          font-size: 18px;
          color: #69d3da;
          letter-spacing: 0;
          text-align: left;
          line-height: 36px;
        }
        .type-list {
          width: 100%;
          padding: 0;
          margin-top: 26px;
          list-style: none;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          box-sizing: border-box;
          .type-list-rs {
            width: 100%;
            list-style: none;
            margin-bottom: 20px;
            .rs-name {
              width: 100%;
              display: flex;
              justify-content: space-around;
              align-items: center;
              font-family: PingFangSC-Regular;
              font-size: 12px;
              color: #e5e5e5;
              margin-bottom: 5px;
              .name {
                flex: 1;
                text-align: left;
              }
              .number {
                flex: 1;
                text-align: right;
              }
            }
            .rs-process {
              width: 100%;
              height: 6px;
              border-radius: 4px;
              background: #333333;
              .process {
                transition: width 0.3s ease-in-out;
                height: 100%;
                border-radius: 4px;
                background-image: linear-gradient(
                  270deg,
                  #68e0cf 0%,
                  #209cff 100%
                );
              }
            }
          }
        }
      }
      .info-table {
        flex: 3;
        height: 659px;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
        .table-rs {
          width: 100%;
          height: 562px;
          overflow-y: auto;
          .table-header {
            width: 100%;
            height: 36px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .header-item {
              width: 186px;
              height: 100%;
              border: none;
              outline: none;
              background: #06121d;
              border: 1px solid rgba(62, 178, 215, 0);
              border-radius: 4px;
              font-size: 14px;
              color: #fff;
              padding: 0 14px;
              box-sizing: border-box;
              .input {
                font-size: 14px;
                color: #fff;
                width: 100%;
                height: 100%;
                border: none;
                outline: none;
                background: transparent;
              }
            }
            .header-select {
              width: 186px;
              margin-left: 20px;
              height: 100%;
            }
            .header-more {
              width: 56px;
              margin-left: 20px;
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #72edf5;
              line-height: 28px;
              text-decoration: underline;
            }
            .header-btn {
              width: 66px;
              height: 100%;
              background: #72edf5;
              border-radius: 4px;
              text-align: center;
              line-height: 36px;
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #000000;
            }
          }
          .table-list {
           width: 1100px;
            list-style: none;
            padding: 0;
            margin-top: 15px;
            .list-item {
              padding: 0;
              margin: 0;
              list-style: none;
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 36px;
              &:nth-of-type(2n + 1) {
                background: #06121d;
              }
              &:nth-of-type(2n) {
                background: transparent;
              }
              .item-no {
                width: 50px;
                height: 100%;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #ffffff;
                display: flex;
              justify-content: space-around;
              align-items: center;
                text-align: center;
              }
              .item-pic {
                width: 120px;
                height: 100%;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #ffffff;
                line-height: 36px;
                text-align: center;
              }
              .item-name {
                width: 158px;
                text-align: left;
                height: 100%;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #ffffff;
                line-height: 36px;
              }
              .item-type {
                width: 116px;
                text-align: left;
                height: 100%;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #ffffff;
                line-height: 36px;
              }
              .item-phone {
                width: 125px;
                text-align: left;
                height: 100%;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #ffffff;
                line-height: 36px;
              }
              .item-people {
                width: 116px;
                text-align: left;
                height: 100%;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #ffffff;
                line-height: 36px;
              }
              .item-cardid {
                width: 194px;
                text-align: left;
                height: 100%;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #ffffff;
                line-height: 36px;
              }
            }
          }
        }
        .table-footer {
          width: 100%;
          padding-top: 60px;
          box-sizing: border-box;
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }
}
.pic{
   height: 70px;
}
.content{
  margin: 0 auto;
  margin-top: 80px;
  width: 80%;

  .monitor-content{
    height: 60px;
    display: flex;
    border:1px solid #68e0cf;

    .items-title{
      height: 100%;
      background: rgba(27, 58, 61, 0.75);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex:1
    }
    .items-content{
      flex:2;
      display: flex;
      align-items: center;
    }
  }
}
  .content-btn{
    background: rgb(114, 237, 245);
    width: 100px;
    height: 50px;
    line-height: 50px;
    border-radius: 4px;
    margin-top: 10px;
    cursor: pointer;
  }
</style>
